import { DatePicker, Form, FormInstance, Input, Select } from "antd";

export default function Search({
  midList,
  state,
  source,
  searchForm,
  changeSearch,
}: {
  midList: { value: number; title: string }[] | [];
  state: { value: number; title: string }[] | [];
    source: { value: number; title: string }[] | [];
    searchForm: FormInstance<unknown>;
    changeSearch: (str: string, value: string) => void;
}) {
  const { RangePicker } = DatePicker;

  return (
    <Form
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      form={searchForm}
      layout="inline"
      style={{ marginTop: "5px" }}
      initialValues={{ type: "all", state: "all", source: "all" ,phpne:'',id:'',vCode:'',createTime:''}}
    >
      <Form.Item label="订单编号" style={{ width: "280px" }}>
        <Input
          placeholder="请输入内容"
          onChange={(v) => {
            changeSearch("id", v.target.value);
          }}
        />
      </Form.Item>
      <Form.Item label="预定车型" style={{ width: "280px" }}>
        <Select
          placeholder="请选择状态"
          defaultValue="all"
          onChange={(v) => changeSearch("type", v)}
        >
          <Select.Option value="all" key={"all"}>
            全部
          </Select.Option>
          {midList.map((item: { title: string; value: number }) => (
            <Select.Option value={item.value} key={item.value}>
              {item.title}
            </Select.Option>
          ))}
        </Select>
      </Form.Item>
      <Form.Item label="车牌号" style={{ width: "200px" }}>
        <Input
          placeholder="请输入内容"
          onChange={(e) => changeSearch("vCode", e.target.value)}
        />
      </Form.Item>
      <Form.Item label="承租人姓名/手机号" style={{ width: "360px" }}>
        <Input
          placeholder="请输入内容"
          onChange={(e) => changeSearch("phone", e.target.value)}
        />
      </Form.Item>
      <Form.Item label="创建时间" style={{ width: "280px" }}>
        <RangePicker
          onChange={(_, dataString: string[]) => {
            changeSearch("createTime", dataString.join(","));
          }}
        />
      </Form.Item>
      <Form.Item label="订单状态" style={{ width: "280px" }}>
        <Select
          placeholder="请选择门店"
          defaultValue="all"
          onChange={(v) => changeSearch("state", v)}
        >
          <Select.Option value="all" key={"all"}>
            全部
          </Select.Option>
          {state.map((item: { title: string; value: number }) => (
            <Select.Option value={item.value} key={item.value}>
              {item.title}
            </Select.Option>
          ))}
        </Select>
      </Form.Item>
      <Form.Item label="订单来源" style={{ width: "300px" }}>
        <Select
          placeholder="请选择门店"
          defaultValue="all"
          onChange={(v) => changeSearch("source", v)}
        >
          <Select.Option value="all" key={"all"}>
            全部
          </Select.Option>
          {source.map((item: { title: string; value: number }) => (
            <Select.Option value={item.value} key={item.value}>
              {item.title}
            </Select.Option>
          ))}
        </Select>
      </Form.Item>
    </Form>
  );
}
